<template>
  <div>
    <div class="node" v-has="{action: 'subsidy:count:statistics', effect: 'move'}">
      <div :class="[$style.search_box, $style.topSelect]">
        <div :class="$style.selectBox">
          <label>时间筛选类型：</label>
          <el-select
            style="width:160px"
            v-model="timeType"
            @change="changeSearch"
            placeholder="请选择"
          >
          <!-- <el-option label="请选择" value=""></el-option> -->
            <el-option label="年" value="year"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="日" value="date"></el-option>
          </el-select>
        </div>
        <div :class="$style.selectBox" style="margin-right:20px;display: flex;align-items: center;">
          <label>创建时间：</label>
          <el-date-picker
            v-model="appointmentTime"
            type="daterange"
            @change="getRate"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            :picker-options="pickerOptions"
            style="height:40px"
          ></el-date-picker>
        </div>
        <div :class="$style.searchBox1" style="margin-left: 20px">
          <el-button type="primary" @click="getRate">查询</el-button>        
        </div>
      </div>
      <Panel title="市政统计">
      <TableEncapsulation
        slot="body"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :sumData="sumData"
        :isSum="true"
      >
      
          <TablePager
            slot="pager"
            v-if="pager.use"
            :size="pager.size"
            :pageChange="pageChange"
            :show-total="pager.showTotal"
            :total="pager.total"
            :current="pager.current"
          >
            <span class="demonstration">GO></span>
          </TablePager>
      </TableEncapsulation>
      </Panel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'subsidy:count:statistics', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
export default {
  name: "governmentStatistics",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput
  },
  data() {
    return {
      tableData: [],
      timeType:'date',
      operation: true,
      apiType:true,
      tagType:"",
      pager: {
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      // groups:["date","api"],
      api:"",
      phone: '',
      plate: '',
      wxSn: '',
      sumData:[],

      settlement: '',
      appointmentTime: [new Date().getTime() - 3600 *1000*24, new Date().getTime()],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        genare: [
            {
            label: "日期",
            type: "text",
            prop: "dateTime",
            align: "center"
            },
            {
            label: "充电电量",
            type: "text",
            prop: "electricity",
            align: "center"
            },
            {
            label: "数量",
            type: "text",
            prop: "total",
            align: "center",
            },
            //  {
            // label: "推送电量",
            // type: "text",
            // prop: "sync",
            // align: "center"
            // },
            // {
            // label: "推送数量",
            // type: "text",
            // prop: "syncNum",
            // align: "center"
            // },
          
        ],
        teGere: [
            {
            label: "日期",
            type: "text",
            prop: "dateTime",
            align: "center"
            },
            {
            label: "充电电量",
            type: "text",
            prop: "electricity",
            align: "center"
            },
            {
            label: "推送电量",
            type: "text",
            prop: "sync",
            align: "center"
            },
            {
            label: "电量百分比(%)",
            type: "text",
            prop: "elePer",
            align: "center"
            },
            {
            label: "数量",
            type: "text",
            prop: "total",
            align: "center",
            },
             
            {
            label: "推送数量",
            type: "text",
            prop: "syncNum",
            align: "center"
            },
            {
            label: "推送数量百分比(%)",
            type: "text",
            prop: "totalPer",
            align: "center"
            },
          
        ]
    };
  },
  created() {
    // let user_id = localStorage.getItem('user_id')
    // console.log(user_id)
    // if(user_id){
    //   if(user_id === 3 || user_id ===8){
    //     this.genare = this.teGere
    //   }
    // }
    this.getRate();
  },
  computed: {
    tableConfig () {
      return {
        selection: true,
        columnConfig: this.genare.filter(Boolean)
        }
    },
    groups () {
      let groups = []
      if(this.timeType == 'year'){
       groups.push('year') 
      }
      if(this.timeType == 'month'){
       groups.push('month') 
      }
      if(this.timeType == 'date'){
       groups.push('date') 
      }
      return  groups
    },
    userInfo() {
			    return this.$store.getters;
			},
  },
  methods: {
    async getRate() {
      let end = this.appointmentTime ? (dateFormat(this.appointmentTime[1], "yyyy-MM-dd")) : undefined
      let begin = this.appointmentTime ? (dateFormat(this.appointmentTime[0],"yyyy-MM-dd")) : undefined
      let groups =  this.groups
      let api =  this.api
      let search = objectFilter({begin, end, groups, api })
      let res = await request({
        url: "/subsidy/count/states",
        method: "POST",
        data: search
      });
      //  res = {"msg":"success","code":0,"counts":[{"date":"22-01-20","electricity":93365.109,"sync":65826.308,"syncNum":2619,"total":3842},{"date":"22-01-21","electricity":63144.245,"sync":34574.161,"syncNum":1424,"total":2489}]}
      let num = {allEle : 0, allNum : 0, allEleSync : 0, allNumSync : 0, allPer : 0, allElePer : 0}
      res.counts.map((item, index) => {
        if(item.year){
          item.dateTime = item.year
        }
        if(item.month){
          item.dateTime = item.month
        }
        if(item.date){
          item.dateTime = item.date
        }
        if(index ==0){
            if(item.sync){
                this.genare = this.teGere
            }
        }
        if(item.electricity &&item.electricity !=0){
         item.elePer = (item.sync/item.electricity*100).toFixed(2) 
        }
        if(item.total &&item.total !=0){
         item.totalPer = (item.syncNum/item.total*100).toFixed(2) 
        }
        num.allEle+=item.electricity
        num.allEleSync+=item.sync
        num.allNum+=item.total
        num.allNumSync+=item.syncNum
        return item
      })
      if(num.allEle &&num.allEle !=0){
         num.allElePer = (num.allEleSync/num.allEle*100).toFixed(2) 
        }
        if(num.allNum &&num.allNum !=0){
         num.allPer = (num.allNumSync/num.allNum*100).toFixed(2) 
        }
        //                    日期    充电电量                 推送电量                     电量百分比         数量         推送数量        推送百分比
      let reallData = ['合计', '—' , (num.allEle).toFixed(3),(num.allEleSync).toFixed(3)  ,num.allElePer  ,num.allNum  ,num.allNumSync  ,num.allPer]
      let reallDataEl = ['合计', '—' ,(num.allEle).toFixed(3),num.allNum]
     
      if(num.allEleSync){
        this.sumData = reallData
      }else{
        this.sumData = reallDataEl
      }
      // console.log('userInfo',this.$store.getters.userInfo)
      this.tableData = res.counts
    },
    pageChange(val) {
      this.pager.current = val;
      this.getRate();
    },
    changeSearch(key, val) {
     this.getRate();
    },
     handleChange(value) {
      // this.regionId = value[value.length-1]
      this.getRate();
    },
    handleChangeApi(value){
      // this.setGroups()
      this.getRate()
    },
    setGroups(){
      let groups = []
      if(this.apiType){
        groups.push('api')
      }
      if(this.timeType == 'day'){
        groups.push('date')
      }
      if(this.timeType == 'month'){
        groups.push('month')
      }
      if(this.timeType == 'year'){
        groups.push('year')
      }
      this.groups = groups
    },
    changeSearchTag(key, val) {
      this[key] = val;
      if(this.api){
          this.groups = [this.api, this.timeType];
      }
      let arr = new Set(this.groups)
      arr.add()
      if(this.gunId){

      }
    },

  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>